<template>
  <div>
    <div class="top fixed w100 t0 z1 border-box">
      <div class="flex just-between box">
        <div>
          <img width="26" src="../assets/icon.png"/>
        </div>
        <div class="search">
          <van-icon size="18" class="search-icon" name="search" />
          <span>请输入商品名称</span>
        </div>
        <div>
          <van-icon name="manager-o" size="24"/>
        </div>
      </div>
      <div>
        <van-tabs background="none" line-width="30px" title-active-color="#ff6700" color="#ff6700" @click="change">
          <van-tab title="推荐"></van-tab>
          <van-tab title="智能"></van-tab>
          <van-tab title="电视"></van-tab>
          <van-tab title="家电"></van-tab>
          <van-tab title="笔记本"></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="main">
      <div v-show="index === 0">
      <!-- 轮播图 -->
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img width="100%" src="./../assets/banner1.jpg"/>
          </van-swipe-item>
          <van-swipe-item>
            <img width="100%" src="./../assets/banner2.png"/>
          </van-swipe-item>
          <van-swipe-item>
            <img width="100%" src="./../assets/banner3.jpg"/>
          </van-swipe-item>
      
        </van-swipe>
        <!--  快捷通道 -->
        <van-grid square :column-num="5">
          <van-grid-item v-for="value in 10" :key="value" class="imgbox">
            <img width="150%" :src="imgSrc"/>
          </van-grid-item>
        </van-grid>
        <!-- 商品列表 -->
        <div class="goods flex just-evenly flex-wrap align-center">
          <router-link tag="div" v-for="item in phoneList" :key="item.id" :to="'/detail?id='+item._id">
            <img width="100%" :src="item.mainImage"/>
            <p class="align-center title">{{item.title }}</p>
            <p class="align-center desc mt3 mb3">{{item.desc}}</p>
            <p class="align-center price"><span class="fs12">￥</span>{{item.price}}<span class="fs12">起</span></p>
            <van-button color="rgb(234, 98, 91)" class="mt5 mb5">立即购买</van-button>
          
          </router-link>
          
        </div>
      </div>
      <div v-show="index === 1">2</div>
      <div v-show="index === 2">3</div>
      <div v-show="index === 3">4</div>
      <div v-show="index === 4">5</div>
    </div>
  </div>
</template>

<!-- 在首页去请求数据 -->
<script>
import axios  from 'axios'
export default {
  data () {
    return {
      index: 0,
      imgSrc: require('./../assets/1.webp'),
      phoneList: []
    } 
  },
  methods: {
     change (index) {
      this.index !== index && (this.index = index)
     },
    //  此方法用来请求数据
     getList () {
      axios.get('/api/list').then(data => {
        this.phoneList = data.data.data

      })
     }
  },
  mounted () {
    // 一进入界面就执行
    this.getList()
  }
}
// 后端是通过id在数据库中拿数据的，id从哪里来？
// 前端在查看不同商品的时候，把这个id传递给后端

// 现在是列表界面  从列表进入详情界面
// 请求数据的代码应该写在详情界面，请求到的结果是商品详情，也是要展示到详情界面的
// id在list中，list在 列表界面  从列表进入详情的时候，将id携带过去
// 界面之间的数据传参
</script>
<style>
.main{
  padding-top: 80px;
  padding-bottom: 80px;
}
  .goods .van-button{
    height: 34px;
    font-size: 13px;
  }
</style>
<style scoped>
.title{
  color: rgba(0,0,0,.87);
  font-size: 15px;
  height: 20px;
  line-height: 20px;
}
.price{
  color:#ff6700;
  font-size: 15px;
}

.desc{
  color: rgba(0,0,0,.54);
  font-size: 12px;
}
.imgbox{
  overflow: hidden;
}

  .goods>div{
    width: 49vw;
  }
  /* % 
    当你在设置宽度的时候  %的参考单位是父级元素   父级是屏幕宽度  50%  屏幕的一半
                                              父级是屏幕的一半 50% 屏幕的四分之一
     vw 100vw = 屏幕的宽度   参考单位就是屏幕宽度
  */
  
  .top{
    background: #f2f2f2;
    padding:2px 14px 0;
  }
  .search{
    background: #fff;
    height: 34px;
    line-height: 34px;
    flex: 1;
    margin: 0 15px;
    font-size: 16px;
    border: 1px solid #e5e5e5;
    color: rgba(0,0,0,.3);
  }
  .search-icon{
    margin: 0 8px;
  }
  .box>div{
    height:34px;
    display: flex;
    align-items: center;
    
  }
</style>